<template>
  <div class="mouseMenu" :style="ps" v-if="show" @mousedown.stop @contextmenu.prevent>
    <div @click.stop="add" class="mouseItem mhover">
      <img src="../assets/svg/add.svg" />
      <span>添加图标</span>
    </div>
    <div @click.stop="addGroup" class="mouseItem mhover">
      <img src="../assets/svg/class.svg" />
      <span>创建分类</span>
    </div>
    <div @click.stop="editAll" class="mouseItem mhover">
      <img src="../assets/svg/edit.svg" />
      <span>批量编辑</span>
    </div>
    <div @click.stop="refresh" class="mouseItem mhover">
      <img src="../assets/svg/reload.svg" />
      <span>刷新页面</span>
    </div>
    <div @click.stop="openSetting" class="mouseItem mhover">
      <img src="../assets/svg/setting.svg" />
      <span>设置</span>
    </div>
  </div>
</template>
<script setup>
import { reactive, onUnmounted, ref } from "vue";
import emitter from "@/util/emitter";
import { useStore } from "vuex";
import redirectUrl from "../util/href";
import { getUUID } from "../util/tools";
const store = useStore();
const show = ref(false);
const ps = reactive({
  top: "0px",
  left: "0px",
});
const openSetting = () => {
  redirectUrl("tab://setting");
  show.value = false;
};
const addGroup = () => {
  let dt = {
    id: getUUID(),
    size: "2x2",
    component: "iconGroup",
    name: "创建分组",
    type: "component",
    url: "iconGroup",
    children: [],
  };
  store.state.link.push(dt);
  store.commit("updateLink");
  show.value = false;
};
//编辑所有
const editAll = () => {
  store.state.editStatus = true;
  show.value = false;
};
const add = () => {
  // emitter.emit("linkEdit");
  redirectUrl("tab://addicon");
  show.value = false;
};
const refresh = () => {
  emitter.emit("reload");
  show.value = false;
};
//打开菜单
const mousePs = (event) => {
  ps.top = event.top + "px";
  ps.left = event.left + "px";
  show.value = true;
};
//鼠标区域外点击的事件
const closeEvent = (event) => {
  if (show.value) {
    //如果开启了，点击位置不在菜单内则关闭
    show.value = false;
  }
};

window.addEventListener("mousedown", closeEvent);
emitter.on("deskTopMouse", mousePs);
onUnmounted(() => {
  window.removeEventListener("mousedown", closeEvent);
  emitter.off("deskTopMouse", mousePs);
});
</script>
<style lang="less">
.layoutSet {
  padding: 0px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  margin-bottom: 10px;

  > div {
    cursor: pointer;
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding: 0px 10px;
    font-size: 13px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.644);

    &:hover {
      background-color: #fff;
    }
  }
}

.mouseMenu {
  position: fixed;
  width: 120px;
  // height: 200px;
  z-index: 999;
  background-color: transparent;
  border-radius: 3px 10px 10px;
  padding: 10px 0px;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 3px 10px 10px;
    left: 0;
    background: rgba(243, 243, 243, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(40px);
    z-index: -1;
  }

  .mhover:hover {
    background-color: #fff;
  }

  .mouseItem {
    padding: 0px 10px;
    display: flex;
    align-items: center;
    min-height: 35px;
    cursor: pointer;

    > img {
      width: 15px;
      height: 15px;
    }

    > span {
      margin-left: 5px;
      font-size: 13px;
    }
  }
}
</style>
